<template>
    <!--直播课程表目录-->
    <div class="calenda-contain">
        <ul class="calendar-month">
            <li v-for="month in monthList"
                :key="month.month"
                :class="{active: activeMonth === month.month}"
                @click="handleSwitchMonth(month.month)"
            >{{month.month}}</li>
        </ul>
        <ul class="calendar-days" v-if="videoList">
            <li class="course-Calendar" v-for="date in videoList[activeMonth]" :key="date.date">
                <div class="date-timeline" :class="{active: date.today}">
                    <i>√</i>
                </div>
                <div class="date-form">
                    <div class="form-name">{{date.Date}}</div>
                    <div class="form-video" v-for="video in date.list" :key="video.id">
                        <span class="time">{{video.beTime}}</span>
                        <span class="name">{{video.live_name}}</span>
                        <a class="btn warn"
                           @click="handleWatchLive(video,index)"
                           v-if="video.playStatus === -1 && video.is_kt_record === 1"
                        >观看回放</a>
                        <a class="btn disable"
                           v-else-if="video.playStatus === -1 && video.is_kt_record !== 2"
                        >暂无回放</a>
                        <a class="btn active"
                           @click="handleWatchLive(video,index)"
                           v-if="video.playStatus === 1"
                        >进入直播间</a>
                        <a class="btn info"
                           v-if="video.playStatus === 0"
                        >未开始</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: 'courseCalendar',
    components: {
        /**/
    },
    data() {
        return {
            activePage: null,
            videoList: null,
            monthList: [],
            activeMonth: ''
        };
    },
    props: {
        courseId: {

        }
    },
    watch: {
        // eslint-disable-next-line no-unused-vars
        courseId(val) {
            this.getPageList();
        }
    },
    mounted() {
        this.getPageList();
    },
    methods: {
        // 章节列表
        getPageList() {
            return this.$api.ajaxData({
                pathName: 'getLiveListByCourseId',
                authorization: true,
                params: {
                    courseId: this.courseId
                }
            }).then(res =>{
                this.coverDealWithDate(res.obj);
            }).catch(()=> {
                this.videoList = [];
            });
        },
        // 视频内容处理
        coverDealWithDate(originList) {
            let list = [];
            if(!originList) return list;
            let tempDays = {};
            let nowTime = new Date().getTime();
            originList.forEach(item=>{
                let temp = item;
                let bTime = this.$util.dateConverter('yyyy-MM-dd hh:mm',item.live_bg_time);
                let eTime = this.$util.dateConverter('yyyy-MM-dd hh:mm',item.live_ed_time);
                let beTime = '';
                if(bTime.slice(0,10) === temp.live_date) {
                    beTime += bTime.slice(-5);
                } else {
                    beTime += this.$util.dateConverter('yyyy年MM月dd日 hh:mm',item.live_bg_time) || '未知'
                }
                beTime += '——';
                if(eTime.slice(0,10) === temp.live_date && bTime.slice(0,10) === eTime.slice(0,10)) {
                    beTime += eTime.slice(-5);
                } else {
                    beTime += this.$util.dateConverter('yyyy年MM月dd日 hh:mm',item.live_ed_time) || '未知'
                }
                temp.beTime = beTime;
                if (nowTime < item.live_bg_time) {
                    temp.playStatus = 0;
                } else if(item.live_bg_time <= nowTime && nowTime <=item.live_ed_time) {
                    temp.playStatus = 1;
                } else {
                    temp.playStatus = -1;
                }
                tempDays[item.live_date] =tempDays[temp.live_date] || [];
                tempDays[item.live_date].push(temp);
            });
            let tempMonth = {};
            Object.keys(tempDays).forEach(key=>{
                let month = key.slice(0,4)+'年'+key.slice(5,7)+'月';
                tempMonth[month] = tempMonth[month] || [];
                let today = false;
                if(this.$util.dateConverter('yyyy-MM-dd',nowTime) === key) {
                    today = true;
                }
                tempMonth[month].push({
                    date: key,
                    Date: this.$util.dateConverter('MM月dd日',key),
                    today: today,
                    list: tempDays[key]
                });
            });
            Object.keys(tempMonth).forEach(key=>{
                list.push({
                    month: key,
                    days: tempMonth[key]
                })
            });
            this.monthList = list;
            this.activeMonth = list[0].month;
            this.videoList =tempMonth;
        },
        //切换月份
        handleSwitchMonth(month){
            this.activeMonth = month;
        },
        // 查看视频
        // eslint-disable-next-line no-unused-vars
        handleWatchLive(video, index) {
            if(!video.channelid) {
                this.$util.alert('直播准备中');
                return
            }
            let routeData = this.$router.resolve({ name: 'live', query:  {
                channelId: video.channelid,
                type: 2
            }});
            window.open(routeData.href, '_blank');
        }
    }
};
</script>
<style scoped lang="scss">
ul,li,p {
    margin: 0;
}
.calenda-contain {
    .calendar-month {
        display: flex;
        flex-wrap: wrap;
        padding: 0 20px;
        li {
            width: 100px;
            height: 25px;
            line-height: 23px;
            margin: 10px 20px 10px 0;
            border-radius: 5px;
            font-size: 12px;
            border: 1px solid rgba(204, 204, 204, 1);
            text-align: center;
            cursor: pointer;
            &.active {
                background: rgba(0, 121, 254, 1);
                color: #fff;
                border: none;
            }
        }
    }
    .calendar-days {
        padding: 10px 0 0;
        .course-Calendar {
            display: flex;
            .date-timeline {
                padding: 0 10px;
                i {
                    display: block;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background: #fff;
                    border: 1px solid #999;
                    color: #999;
                    text-align: center;
                }
                &.active {
                    i {
                        border-color: #007aff;
                        background: #007aff;
                        color: #fff;
                    }
                }
                &:after {
                    content: '';
                    display: block;
                    margin:  0 auto;
                    height: 100%;
                    width: 1px;
                    background: #ccc;
                }
            }
            .date-form {
                flex: 1;
                margin: 0 20px 20px 0;
                border: 1px solid rgba(242, 242, 242, 1);
                box-shadow: 0 2px 6px rgba(242, 242, 242, 1);
                .form-name {
                    height: 50px;
                    line-height: 50px;
                    padding: 0 20px;
                    font-size: 14px;
                    font-weight: bold;
                    color: #333;
                    border-bottom: 1px solid rgba(242, 242, 242, 1);
                }
                .form-video {
                    display: flex;
                    align-items: center;
                    padding: 0 20px;
                    height: 50px;
                    font-size: 13px;
                    .time {
                        margin-right: 30px;
                    }
                    .name {
                        flex: 1;
                    }
                    .btn {
                        width: 70px;
                        height: 25px;
                        line-height: 23px;
                        text-align: center;
                        border-radius: 13px;
                        font-size: 12px;
                        border: 1px solid rgba(188, 188, 188, 1);
                        color: rgba(188, 188, 188, 1);
                        &:hover {
                            opacity: 0.7;
                        }
                        &.active {
                            background: #007aff;
                            border-color: #007aff;
                            color: #fff;
                        }
                        &.warn {
                            background: #f4c367;
                            border-color: #f4c367;
                            color: #fff;
                        }
                        &.disable {
                            background: rgba(188, 188, 188, 1);
                            color: #fff;
                        }
                        &.info {
                            border-color: #007aff;
                            color: #007aff;
                        }
                    }
                }
            }
        }

    }
}
</style>
